<template>
    <div class="course-list">
        <div class="course-tabs">
            <li v-for="(item,index) in tabsList" :key="index" @click="handleTabsClick(item, index)" :class="currentIndex === index ? 'active' : ''">
                {{ item.name }}
            </li>
        </div>
        <div class="course-study" v-if="!isMyCourse">
            <div class="course-item" v-for="(item,index) in courseList" :key="index">
                <div class="item-title">
                    <span></span>
                    <p>{{ item.name }}</p>
                </div>
                <div class="course-item-arr">
                    <div class="course-li" v-for="(sItem, sIndex) in item.list" :key="sIndex">
                        <div class="item-img">
                            <img :src="sItem.pic" alt="">
                        </div>
                        <div class="item-text">
                            <p>{{ sItem.title }}</p>
                            <div class="item-btn">
                                <div class="biaoqian">
                                    <span v-for="tItem in sItem.tags" :key="tItem">{{ tItem }}</span>
                                </div>
                                <button class="morebtn" @click="toDetail(sItem)">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="course-study" v-else>
            <div class="course-item" v-for="(item,index) in myCourse" :key="index">
                <div class="item-title">
                    <span></span>
                    <p>{{ item.name }}</p>
                </div>
                <div class="course-item-arr">
                    <div class="course-li" v-for="(sItem, sIndex) in item.list" :key="sIndex">
                        <div class="item-img">
                            <img :src="sItem.pic" alt="">
                        </div>
                        <div class="item-text">
                            <p>{{ sItem.title }}</p>
                            <div class="item-btn">
                                <div class="biaoqian">
                                    <span v-for="tItem in sItem.tags" :key="tItem">{{ tItem }}</span>
                                </div>
                                <button class="morebtn" @click="toDetail(sItem)">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentIndex: 0,
            tabsList: [
                {
                    name: '全部课程',
                    type: 'all'
                },
                {
                    name: '我的课程',
                    type: 'my'
                }
            ],
            isMyCourse: false,
            courseList: [],
            myCourse: [],
        }
    },
    mounted() {
        this.getAllCourseList();
    },
    methods: {
        handleTabsClick(item, index) {
            this.currentIndex = index;
            if (item.type === 'all') {
                this.isMyCourse = false;
                this.getAllCourseList();
            } else {
                this.isMyCourse = true;
                this.getMyCourseList();
            }
        },
        async getAllCourseList() {
            const res = await this.$request.get('api/course/index');
            if (res.code === 1) {
                res.data.map(item => {
                    item.list.map(sItem => {
                        if (sItem.tags) {
                            sItem.tags = sItem.tags.split(',');
                        }
                    })
                })
                this.courseList = res.data;
            } else {
                this.$message.error(res.msg);
                this.courseList = [];
            }
        },
        async getMyCourseList() {
            const res = await this.$request.get('api/course/my');
            if (res.code === 1) {
                res.data.map(item => {
                    item.list.map(sItem => {
                        if (sItem.tags) {
                            sItem.tags = sItem.tags.split(',');
                        }
                    })
                })
                this.myCourse = res.data;
            } else {
                this.$message.error(res.msg);
                this.myCourse = [];
            }
        },
        toDetail(item) {
            this.$emit('toDetail', item.id);
        }
    }
}
</script>
<style lang="less" scoped>
.course-list{
    .course-tabs{
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
        li{
            list-style: none;
            width: 170px;
            height: 56px;
            background: #EDF5FF;
            border-radius: 8px;
            border: 1px solid #78A9FF;
            line-height: 56px;
            font-weight: 400;
            font-size: 17px;
            color: #0080FF;
            text-align: center;
            margin-right: 10px;
            &.active{
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                color: #FFFFFF;
            }
        }
    }
    .course-study{
        .course-item{
            margin-bottom: 20px;
            .item-title{
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                border-bottom: 1px solid #E9E6F2;
                span{
                    display: block;
                    width: 4px;
                    height: 18px;
                    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                    border-radius: 7px;
                    margin-right: 8px;
                }
                p{
                    font-weight: 600;
                    font-size: 20px;
                    color: #0C0D0E;
                    margin-bottom: 0px;
                }
            }
            .course-item-arr{
                display: flex;
                flex-wrap: wrap;
                margin-top: 20px;
                .course-li{
                    width: 390px;
                    // height: 400px;
                    background: #FFFFFF;
                    box-shadow: 0px 2px 12px 0px #E1E3EB;
                    border-radius: 12px;
                    border: 1px solid #FFFFFF;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    .item-img{
                        width: 390px;
                        height: 290px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-top-left-radius: 12px;
                            border-top-right-radius: 12px;
                        }
                    }
                    .item-text{
                        padding: 15px;
                        p{
                            font-weight: 500;
                            font-size: 18px;
                            color: #12192D;
                            text-align: left;
                        }
                        .item-btn{
                            display: flex;
                            justify-content: space-between;
                            .biaoqian{
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                span{
                                    // width: 80px;
                                    height: 40px;
                                    line-height: 40px;
                                    background: #EDF5FF;
                                    border-radius: 8px;
                                    border: 1px solid #78A9FF;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #0080FF;
                                    text-align: center;
                                    margin-right: 20px;
                                    padding: 0 10px;
                                    margin-bottom: 10px;
                                }
                            }
                            .morebtn{
                                width: 110px;
                                height: 40px;
                                line-height: 40px;
                                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                                border-radius: 8px;
                                font-weight: 400;
                                font-size: 15px;
                                color: #FAFBFF;
                                text-align: center;
                                border: none;
                                cursor: pointer;
                            }
                        }
                    }
                    &:last-child{
                        margin-right: 0 !important;
                    }
                }
            }
        }
    }
}
</style>